import {
	VantComponent
} from '../common/component';
import {
	addUnit
} from '../common/utils';
let ARRAY = [];
VantComponent({
	field: true,
	relation: {
		name: 'dropdown-item',
		type: 'descendant',
		linked(target) {
			this.children.push(target);
			this.updateItemListData();
		},
		unlinked(target) {
			this.children = this.children.filter((child) => child !== target);
			this.updateItemListData();
		}
	},
	props: {
		activeColor: {
			type: String,
			observer: 'updateChildrenData'
		},
		overlay: {
			type: Boolean,
			value: true,
			observer: 'updateChildrenData'
		},
		zIndex: {
			type: Number,
			value: 10
		},
		duration: {
			type: Number,
			value: 200,
			observer: 'updateChildrenData'
		},
		direction: {
			type: String,
			value: 'down',
			observer: 'updateChildrenData'
		},
		closeOnClickOverlay: {
			type: Boolean,
			value: true,
			observer: 'updateChildrenData'
		},
		closeOnClickOutside: {
			type: Boolean,
			value: true
		}
	},
	data: {
		itemListData: []
	},
	beforeCreate() {
		const {
			windowHeight
		} = wx.getSystemInfoSync();
		this.windowHeight = windowHeight;
		this.children = [];
		ARRAY.push(this);
	},
	destroyed() {
		ARRAY = ARRAY.filter(item => item !== this);
	},
	methods: {
		updateItemListData() {
			this.setData({
				itemListData: this.children.map((child) => child.data)
			});
		},
		updateChildrenData() {
			this.children.forEach((child) => {
				child.updateDataFromParent();
			});
		},
		toggleItem(active) {
			this.children.forEach((item, index) => {
				const {
					showPopup
				} = item.data;
				if (index === active) {
					item.toggle();
				} else if (showPopup) {
					item.toggle(false, {
						immediate: true
					});
				}
			});
		},
		close() {
			this.children.forEach((child) => {
				child.toggle(false, {
					immediate: true
				});
			});
		},
		getChildWrapperStyle() {
			const {
				zIndex,
				direction
			} = this.data;
			return this.getRect('.van-dropdown-menu').then((rect) => {
				const {
					top = 0, bottom = 0
				} = rect;
				const offset = direction === 'down' ? bottom : this.windowHeight - top;
				let wrapperStyle = `z-index: ${zIndex};`;
				if (direction === 'down') {
					wrapperStyle += `top: ${addUnit(offset)};`;
				} else {
					wrapperStyle += `bottom: ${addUnit(offset)};`;
				}
				return wrapperStyle;
			});
		},
		onTitleTap(event) {
			const {
				index
			} = event.currentTarget.dataset;
			const child = this.children[index];
			if (!child.data.disabled) {
				ARRAY.forEach(menuItem => {
					if (menuItem &&
						menuItem.data.closeOnClickOutside &&
						menuItem !== this) {
						menuItem.close();
					}
				});
				this.toggleItem(index);
			}
		}
	}
});
